<template>
  <div class="article-item van-hairline--bottom flex">
    <div class="flex1">
      <div class="article-item-title van-multi-ellipsis--l2">
        {{ artilceItem.title }}
      </div>
      <div class="flex">
        <div class="flex1">
          <div class="article-item-tag" v-if="artilceItem.videoStatus">
            视频
          </div>
          <div class="article-item-tag" v-if="artilceItem.audioStatus">
            音频
          </div>
          <div class="article-item-tag" v-if="artilceItem.textStatus">
            图文
          </div>
        </div>
        <div
          v-if="isRead"
          class="iconfont iconyidu f48"
          style="color:#27CDC5"
        />
      </div>
    </div>
    <div class="article-item-img">
      <Image :src="artilceItem.coverPicture" />
    </div>
  </div>
</template>

<script>
import { toRaw } from 'vue';
import Image from '@/components/Image';
export default {
  components: {
    Image
  },
  props: {
    articleData: {
      type: Object,
      default: () => ({})
    },
    isRead: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const artilceItem = toRaw(props.articleData);
    return { artilceItem };
  }
};
</script>

<style lang="scss" scoped>
.article-item {
  padding: 40px 0;

  &-title {
    font-size: 36px;
    font-weight: 500;
    color: #373d52;
    line-height: 50px;
    margin-bottom: 22px;
  }

  &-img {
    width: 240px;
    height: 160px;
    border-radius: 16px;
    margin-left: 28px;
    overflow: hidden;
  }

  &-tag {
    width: 72px;
    height: 36px;
    background: #f7f7fa;
    border-radius: 6px;
    font-size: 24px;
    font-weight: 400;
    color: #777b8f;
    line-height: 37px;
    text-align: center;
    margin-right: 16px;
    display: inline-block;
  }
}
</style>